<template>
  <div class="index_main">
    <div class="btnBox">
      <el-button type="primary" @click="addAdvertising">新增广告链接</el-button>
      <el-button type="primary" @click="addGoods">配置推荐资产</el-button>
      <el-button type="primary" @click="addCardActivity">打卡活动配置</el-button>
    </div>
    <div class="phone_box">
      <div class="header_img">
        <img src="@/static/phone_top.png" alt />
        <div class="tixing"></div>
      </div>
      <div class="ph_main">

        <!-- <div class="one_bj" v-if="imgShowType == '2'">
          <div class="tou">
            <el-button size="small" type="primary" icon="el-icon-edit" @click="addBanner"></el-button>
          </div>
          <img class="search_img" src="@/static/search.png" alt="" />
          <img :src="bjImg" alt="" style="width: 100%;height: 138px;">
        </div>
        <img class="search_head" src="@/static/search_head.png" alt=""> -->

        <!-- <div class="banner" @click="addBanner" v-if="imgShowType == '1'">
          <img class="search_img_1" src="@/static/search.png" alt="" v-if="imgShowType == '1'" />
          <el-carousel height="150px">
            <el-carousel-item v-for="(item, index) in bannerList" :key="index + 'b'">
              <img class="bannerImg" :src="item.imgUrl" alt />
            </el-carousel-item>
          </el-carousel>
        </div> -->
        <!-- <div class="announcement">
          <img src="@/static/announcement.png" alt />
        </div> -->
        <!-- 广告 -->
        <div class="advertising_box">
          <draggable v-model="advertisementList" sort="false" chosenClass="chosen" forceFallback="true"
            group="advertising" animation="1000" @start="onAdvertiStart" @end="onAdvertiEnd">
            <transition-group>
              <!-- <div class="item" v-for="element in myArray" :key="element.id">{{element.name}}</div> -->
              <div v-for="item in advertisementList" :key="item.id">
                <div class="threeBox" v-if="item.advertiseType == 3">
                  <div class="tou">
                    <div class="box"></div>
                    <div class="btn_list">
                      <div class="status">
                        <span v-if="item.isShow == 2">已隐藏</span>
                        <span v-if="item.isShow == 1">显示</span>
                      </div>
                      <el-button size="small" type="primary" icon="el-icon-edit"
                        @click="editAdverti(item.id)"></el-button>
                      <el-button size="small" type="primary" icon="el-icon-delete"
                        @click="deleteAdverti(item.id)"></el-button>
                    </div>
                  </div>
                  <div class="big_m" style="margin-right: 14px">
                    <img :src="item.bannerList[0].imgUrl" alt />
                  </div>
                  <div class="min_m">
                    <img :src="item.bannerList[1].imgUrl" alt />
                    <img :src="item.bannerList[2].imgUrl" alt />
                  </div>
                </div>
                <div class="threeBox" v-if="item.advertiseType == 4">
                  <div class="tou">
                    <div class="btn_list">
                      <div class="status">
                        <span v-if="item.isShow == 2">已隐藏</span>
                        <span v-if="item.isShow == 1">显示</span>
                      </div>
                      <el-button size="small" type="primary" icon="el-icon-edit"
                        @click="editAdverti(item.id)"></el-button>
                      <el-button size="small" type="primary" icon="el-icon-delete"
                        @click="deleteAdverti(item.id)"></el-button>
                    </div>
                    <div class="box"></div>
                  </div>
                  <div class="min_m">
                    <img :src="item.bannerList[1].imgUrl" alt />
                    <img :src="item.bannerList[2].imgUrl" alt />
                  </div>
                  <div class="big_m" style="margin-left: 14px">
                    <img :src="item.bannerList[0].imgUrl" alt />
                  </div>
                </div>
                <div class="threeBox" v-if="item.advertiseType == 5">
                  <div class="tou">
                    <div class="btn_list">
                      <div class="status">
                        <span v-if="item.isShow == 2">已隐藏</span>
                        <span v-if="item.isShow == 1">显示</span>
                      </div>
                      <el-button size="small" type="primary" icon="el-icon-edit"
                        @click="editAdverti(item.id)"></el-button>
                      <el-button size="small" type="primary" icon="el-icon-delete"
                        @click="deleteAdverti(item.id)"></el-button>
                    </div>
                    <div class="box"></div>
                  </div>
                  <div class="imgList_5">
                    <div class="five_ad">
                      <img :src="item.bannerList[0].imgUrl" alt="" />
                      <p>{{ item.bannerList[0].title }}</p>
                    </div>
                    <div class="five_ad">
                      <img :src="item.bannerList[1].imgUrl" alt="" />
                      <p>{{ item.bannerList[1].title }}</p>
                    </div>
                    <div class="five_ad">
                      <img :src="item.bannerList[2].imgUrl" alt="" />
                      <p>{{ item.bannerList[2].title }}</p>
                    </div>
                    <div class="five_ad">
                      <img :src="item.bannerList[3].imgUrl" alt="" />
                      <p>{{ item.bannerList[3].title }}</p>
                    </div>
                  </div>
                  <!-- <div class="imgList_4">
                    <img :src="item.bannerList[0].imgUrl" alt="" />
                    <img :src="item.bannerList[1].imgUrl" alt="" />
                    <img :src="item.bannerList[2].imgUrl" alt="" />
                    <img :src="item.bannerList[3].imgUrl" alt="" />
                  </div> -->
                </div>
                <div class="threeBox" v-if="item.advertiseType == 6">
                  <div class="tou">
                    <div class="btn_list">
                      <div class="status">
                        <span v-if="item.isShow == 2">已隐藏</span>
                        <span v-if="item.isShow == 1">显示</span>
                      </div>
                      <el-button size="small" type="primary" icon="el-icon-edit"
                        @click="editAdverti(item.id)"></el-button>
                      <el-button size="small" type="primary" icon="el-icon-delete"
                        @click="deleteAdverti(item.id)"></el-button>
                    </div>
                    <div class="box"></div>
                  </div>
                  <div class="imgList_5">
                    <div class="five_ad">
                      <img :src="item.bannerList[0].imgUrl" alt="" />
                      <p>{{ item.bannerList[0].title }}</p>
                    </div>
                    <div class="five_ad">
                      <img :src="item.bannerList[1].imgUrl" alt="" />
                      <p>{{ item.bannerList[1].title }}</p>
                    </div>
                    <div class="five_ad">
                      <img :src="item.bannerList[2].imgUrl" alt="" />
                      <p>{{ item.bannerList[2].title }}</p>
                    </div>
                    <div class="five_ad">
                      <img :src="item.bannerList[3].imgUrl" alt="" />
                      <p>{{ item.bannerList[3].title }}</p>
                    </div>
                    <div class="five_ad">
                      <img :src="item.bannerList[4].imgUrl" alt="" />
                      <p>{{ item.bannerList[4].title }}</p>
                    </div>
                  </div>
                </div>
                <div class="twoBox" v-if="item.advertiseType == 2">
                  <div class="tou">
                    <div class="btn_list">
                      <div class="status">
                        <span v-if="item.isShow == 2">已隐藏</span>
                        <span v-if="item.isShow == 1">显示</span>
                      </div>
                      <el-button size="small" type="primary" icon="el-icon-edit"
                        @click="editAdverti(item.id)"></el-button>
                      <el-button size="small" type="primary" icon="el-icon-delete"
                        @click="deleteAdverti(item.id)"></el-button>
                    </div>
                    <div class="box"></div>
                  </div>
                  <div class="kong" v-for="aitem in item.bannerList" :key="aitem.id">
                    <img :src="aitem.imgUrl" alt />
                  </div>
                </div>
                <div class="oneBox" v-if="item.advertiseType == 1">
                  <div class="tou">
                    <div class="btn_list">
                      <div class="status">
                        <span v-if="item.isShow == 2">已隐藏</span>
                        <span v-if="item.isShow == 1">显示</span>
                      </div>
                      <el-button size="small" type="primary" icon="el-icon-edit"
                        @click="editAdverti(item.id)"></el-button>
                      <el-button size="small" type="primary" icon="el-icon-delete"
                        @click="deleteAdverti(item.id)"></el-button>
                    </div>
                    <div class="box"></div>
                  </div>
                  <div class="imgBox" v-for="aitem in item.bannerList" :key="aitem.id">
                    <img :src="aitem.imgUrl" alt />
                  </div>
                </div>
              </div>
            </transition-group>
          </draggable>
        </div>
        <!-- 轮播图 -->
        <div class="all_play" @click="addBanner">
          <div class="all_play_banner_null" v-if="bannerList.length==0">点击添加轮播图</div>
          <div class="all_play_banner" v-if="bannerList.length>0">
            <el-carousel height="190px" indicator-position="outside" :interval="5000">
              <el-carousel-item v-for="(item, index) in bannerList" :key="index + 'b'">
                <img class="banner_img" :src="item.imgUrl" alt />
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
        <!-- 打卡活动 -->
        <!-- <div class="all_play" v-if="configLsLength>0">
          <div class="all_play_banner">
            <el-carousel height="190px" indicator-position="outside" :interval="5000">
              <el-carousel-item v-for="(item, index) in activityInfo.configList" :key="index + 'b'">
                <img class="banner_img" :src="item.activityImg" alt />
              </el-carousel-item>
            </el-carousel>
          </div>
        </div> -->
        <!-- 分类 -->
        <div class="classify_box" :class="recommendList.length==1?'classify_box_one':''">
          <el-button class="classify_box_edit" size="mini" type="primary" icon="el-icon-edit"
            @click="editClassify"></el-button>
          <template v-if="recommendList.length==3">
            <div class="classify_box_content" style="width: calc(100% / 3)" v-for="(item, cIndex) in recommendList"
              :key="cIndex" @click="choiceType(item,cIndex)">
              <img class="classify_icon1" src="@/static/classify_icon1.png" alt v-if="changeIndex == cIndex" />
              <img class="classify_icon2" :src="item.url" v-if="item.url" alt />
              <span class="classify_box_content_title">{{ item.title }}</span>
              <span>{{ item.subTitle }}</span>
            </div>
            <img class="bias_img" src="@/static/bias.png" style="position: absolute;left: 33%;" alt />
            <img class="bias_img" src="@/static/bias.png" style="position: absolute;left: 66%;" alt />
          </template>

          <template v-if="recommendList.length==2">
            <div class="classify_box_content" style="width: 50%" v-for="(item, cIndex) in recommendList"
              :key="cIndex" @click="choiceType(item,cIndex)">
              <img class="classify_icon1" src="@/static/classify_icon1.png" alt v-if="changeIndex == cIndex" style="left: 44px;" />
              <img class="classify_icon2" :src="item.url" v-if="item.url" alt style="right: 38px;" />
              <span class="classify_box_content_title">{{ item.title }}</span>
              <span>{{ item.subTitle }}</span>
            </div>
            <img class="bias_img" src="@/static/bias.png" style="position: absolute;left: 50%;" alt />
          </template>
          <template v-if="recommendList.length==1">
            <div class="classify_box_one" style="width: 100%" v-for="(item, cIndex) in recommendList"
              :key="cIndex" @click="choiceType(item,cIndex)">
              <img class="classify_icon1" src="@/static/classify_icon1.png" alt v-if="changeIndex == cIndex" style="left: -4px;" />
              <img class="classify_icon2" :src="item.url" v-if="item.url" alt style="left: 58px;" />
              <span class="classify_box_content_title">{{ item.title }}</span>
              <span style="font-size: 14px;margin-left: 14px;">{{ item.subTitle }}</span>
            </div>
          </template>
        </div>
        <!-- 商品列表 -->
        <div class="baoxiang">
          <!-- <div class="title">推荐列表</div> -->
          <div class="chestList">
            <!--使用draggable组件-->
            <draggable v-model="punchActivityList" sort="false" chosenClass="chosen" forceFallback="true"
              group="punchActivity" animation="1000" @start="onPunchActivityStart" @end="onPunchActivityEnd">
              <transition-group>
                <!-- 资产列表 -->
                <div class="property_box" v-for="(item, index) in punchActivityList" :key="index + 'p'">
                  <div class="property_box_h">
                    <div class="tou_in">
                      <img :src="item.shopLogo" alt="">
                      <p>{{item.shopName}}</p>
                    </div>
                    <div class="jv_li">距您800m</div>
                  </div>
                  <div class="property_box_main">
                    <img class="property_box_l" :src="item.cover" alt="">
                    <div class="property_box_r">
                      <div class="property_box_r_title " >
                        <div class="zhelou" v-if="item.discount>0&&item.discount<7">
                          <img src="../../../../static/zhe_bg.png" alt="" />
                          <span>{{item.discount}}折</span>
                        </div>
                        <p class="name ellipseHide_two" v-if="item.functionType == 4 || item.functionType == 3">{{ item.name }}</p>
                        <div class="property_box_r_title ellipseHide_two" v-if="item.functionType == 1 || item.functionType == 2">{{ item.cardName }}</div>
                      </div>
                      <div class="property_box_r_detail_new">
                          <div class="mon_box">
                            <div class="money">
                              <span class="min_m">￥</span><span class="max_m">{{ item.price }}</span>
                              <span class="old_m" v-if="item.equityWorth&&item.save>0">￥{{ item.equityWorth }}</span>
                            </div>
                            <div class="shen_m" v-if="item.save > 0">共省{{item.save}}元</div>
                          </div>
                          <div class="qiang_box" v-if="item.sellStatus">
                            <!-- <img src="../../../../static/qiang_bg.png" alt=""> -->
                            <p class="p1">马上抢</p>
                            <p class="p2" v-if="item.give ">立赚{{item.give}}{{ item.giveType==1?'CoCo':'椰分' }}</p>
                          </div>
                      </div>
                    </div>
                  </div>
                  
                </div>
              </transition-group>
            </draggable>
          </div>
        </div>
      </div>
    </div>
    <banner-diglog v-if="bannerDiglog" :id="id" :pathType="bannerPath" :visible.sync="bannerDiglog"
      @success="_handleSuccess" />
    <advertising-diglog v-if="advertisingDiglog" :id="AdvertiId" :pathType="advertisingPath"
      :visible.sync="advertisingDiglog" @success="_handleSuccess" />
    <chest-diglog v-if="chestDiglog" :id="id" :pathType="punchActivityPath" :visible.sync="chestDiglog"
      @success="_handleSuccess" />
    <!-- 打卡活动配置 -->
    <card-activity-diglog v-if="cardDiglog" :id="id" :pathType="punchActivityPath" :visible.sync="cardDiglog"
      @success="_handleSuccess"></card-activity-diglog>
    <!-- 分类配置 -->
    <classify-diglog ref="classifyRef" @success="_handleSuccess"></classify-diglog>
  </div>
</template>
<script>
import {
  bannerList,
  advertisementList,
  deleteAdvertisement,
  getEquityCardSummaryConfigList,
  editEquitySort,
  editAdvertisementSort,
  getShowType,
  getShenyeBackground,
  getTradeArea,
  activityh5Ls,
  recommendH5Typels,
} from "@/api/incentiveManagement/adConfigNew";
import bannerDiglog from "../components/index_main/bannerDiglog";
import advertisingDiglog from "../components/index_main/advertisingDiglog";
import chestDiglog from "../components/index_main/chestDiglog";
import cardActivityDiglog from "../components/index_main/cardActivityDiglog";
import classifyDiglog from "../components/index_main/classifyDiglog";
import draggable from "vuedraggable"; //拖动组件

export default {
  name: "shopDetail",
  components: {
    bannerDiglog,
    advertisingDiglog,
    chestDiglog,
    cardActivityDiglog,
    classifyDiglog,
    draggable,
  },
  props: {},
  data() {
    return {
      bannerDiglog: false,
      advertisingDiglog: false,
      chestDiglog: false,
      bannerPath: "add",
      advertisingPath: "add",
      id: "",
      bannerList: [], //轮播图列表
      advertisementList: [], //广告链接列表
      AdvertiId: "", //广告链接ID
      punchActivityList: [], //数字宝箱列表
      punchActivityPath: "add",
      cardDiglog: false,
      imgShowType: '1', //1 轮播图 2 背景图
      bjImg: '',//背景图
      areaList: [],//区域数组
      activityInfo: {},//活动数据
      recommendList: [],//分类列表
      typeId:'',//分类id
      changeIndex: 0,
      configLsLength: 0
    };
  },
  watch: {},
  created() {
    this.getShowType();
    this.getAdvertisList();
    // this.getEquityCardSummaryConfigList();
    this.getTradeArea();
    this.getActivityh5Ls();
    this.getRecommendTypels();
  },
  mounted() { },
  methods: {
    //获取展示轮播图或者背景图  1 轮播图 2 背景图
    getShowType() {
      getShowType().then((res) => {
        this.imgShowType = res.result
        if (res.result == '2') {
          this.getShenyeBackground()
        } else {
          this.getbannerList();
        }
      });
    },
    //获取背景图
    getShenyeBackground() {
      getShenyeBackground().then((res) => {
        this.bjImg = res.result.imgUrl
      });
    },
    //获取轮播图
    getbannerList() {
      bannerList(1).then((res) => {
        this.bannerList = res.result;
      });
    },
    //获取广告列表
    getAdvertisList() {
      advertisementList(1).then((res) => {
        this.advertisementList = res.result;
      });
    },
    //NFR推荐列表
    getEquityCardSummaryConfigList() {
      let data = {
        typeId: this.typeId
      }
      getEquityCardSummaryConfigList(data).then((res) => {
        this.punchActivityList = res.result;
      });
    },
    //添加轮播图
    addBanner() {
      this.bannerDiglog = true;
      if (this.bannerList.length > 0) {
        this.bannerPath = "edit";
      } else {
        this.bannerPath = "add";
      }
    },
    //新增广告链接
    addAdvertising() {
      this.advertisingDiglog = true;
      this.advertisingPath = "add";
    },
    //编辑广告链接
    editAdverti(id) {
      this.advertisingDiglog = true;
      this.advertisingPath = "edit";
      this.AdvertiId = id;
    },
    //删除广告链接
    deleteAdverti(id) {
      this.$confirm("你确定要删除?", "提示", {
        confirmButtonp: "确定",
        cancelButtonp: "取消",
        type: "warning",
      })
        .then(() => {
          deleteAdvertisement(id)
            .then((res) => {
              const { } = res.result;
              this.$message({
                message: "删除成功",
                type: "success",
                duration: 1500,
              });
              setTimeout(() => {
                this.getAdvertisList();
              }, 1000);
            })
            .finally(() => {
              this.loading = false;
            });
        })
        .catch(() => { });
    },
    //新增宝箱商品
    addGoods() {
      this.chestDiglog = true;
    },
    //新增打卡活动配置
    addCardActivity() {
      this.cardDiglog = true;
      if (this.punchActivityList.length > 0) {
        this.punchActivityPath = "edit";
      } else {
        this.punchActivityPath = "add";
      }
    },
    //获取打卡活动地区
    getTradeArea() {
      getTradeArea().then(res => {
        this.areaList = res.result
      })
    },
    //获取打卡活动配置列表
    getActivityh5Ls() {
      let data = {
        tradeArea: '',
      }
      activityh5Ls(data).then(res => {
        this.activityInfo = res.result
        this.configLsLength = res.result.configList.length
      })
    },
    //编辑分类
    editClassify() {
      this.$refs.classifyRef.open();
    },
    //获取分类列表
    getRecommendTypels() {
      recommendH5Typels().then(res => {
        this.recommendList = res.result
        this.typeId = this.recommendList[0].id
        this.getEquityCardSummaryConfigList();
      })
    },
    //点击分类
    choiceType(item,index){
      this.changeIndex = index
      this.typeId = item.id
      this.getEquityCardSummaryConfigList()
    },
    _handleSuccess() {
      this.changeIndex = 0;
      this.typeId = this.recommendList[0].id;
      this.getShowType();
      this.getTradeArea();
      this.getAdvertisList();
      this.getActivityh5Ls();
      this.getRecommendTypels()
      // this.getEquityCardSummaryConfigList();
    },

    //开始拖拽事件
    onPunchActivityStart() {
      this.drag = true;
    },
    //拖拽结束事件
    onPunchActivityEnd() {
      console.log("punchActivityList", this.punchActivityList);
      // editPunchActivitySort
      var list = [];
      this.punchActivityList.forEach((item) => {
        list.push(item.configId);
      });

      editEquitySort(list).then((res) => { });
    },
    //开始拖拽事件
    onAdvertiStart() {
      this.drag = true;
    },
    //拖拽结束事件
    onAdvertiEnd() {
      this.drag = false;
      var list = [];
      this.advertisementList.forEach((item) => {
        list.push(item.id);
      });
      editAdvertisementSort(list).then((res) => { });
    },
  },
};
</script>
<style lang="scss" scoped>
.phone_box {
  width: 395px;
  min-height: 1000px;
  border-radius: 30px;
  border: 10px solid #333;
  margin: 40px 200px 0 100px;
  background: #f5f8fe;
  box-sizing: border-box;
  overflow: hidden;
}

.tixing {
  position: absolute;
  top: 0;
  left: 116px;
  width: 145px;
  height: 0;
  border-radius: 2px;
  border-top: 20px solid #333;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
}

.header_img {
  width: 100%;
  position: relative;

  img {
    width: 100%;
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
  }
}

.ph_main {
  padding: 0px 0 10px;
  background: #f2fbff;

  .one_bj {
    position: relative;
    cursor: pointer;

    .tou {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 2;
      // display: flex;
      align-items: center;
      justify-content: center;
      background: rgba(0, 0, 0, 0.3);
      display: none;
    }

    .search_img {
      width: 94%;
      position: absolute;
      top: 20px;
    }
  }

  .one_bj:hover .tou {
    display: flex;
  }

  .one_bj img {
    width: 100%;
  }

  .search_img {
    width: 94%;
    margin: 0 10px;
    margin-bottom: 10px;
  }
  .search_head{
    width: 345px;
    height: 35px;
    margin-left: 15px;
  }
  .banner {
    width: calc(100% - 0);
    height: 150px;
    color: #fff;
    // margin: 0 14px;
    cursor: pointer;
    position: relative;
    .search_img_1{
      position: absolute;
      top: 8px;
      left: 0;
      z-index: 999;
      width: 94%;
      margin: 0 10px;

    }
  }

  .bannerImg {
    width: 100%;
    height: 100%;
    border-radius: 10px;
  }
}

.announcement {
  margin-top: 10px;
  width: 100%;

  img {
    width: 100%;
  }
}

.advertising_box {
  margin-top: 8px;
  padding: 0 14px;

  .tou {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    display: none;
    z-index: 99;

    .box {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      background: #000;
      opacity: 0.4;
      z-index: 1;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .btn_list {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 14px;
      width: 100%;
      height: 100%;
      z-index: 2;
    }

    .status {
      position: absolute;
      top: 8px;
      left: 8px;

      span {
        color: #fff;
      }
    }
  }

  .threeBox {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: 10px;

    .big_m {
      flex: 1;
      height: 180px;
      border-radius: 8px;
      background: #f6f6f6;

      img {
        width: 100%;
        height: 180px;
        border-radius: 8px;
      }
    }

    .min_m {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      img {
        width: 100%;
        height: 85px;
        border-radius: 8px;
      }
    }

    .imgList_4 {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      img {
        width: 80px;
        height: 60px;
        border-radius: 6px;
      }
    }

    .imgList_5 {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .five_ad {
        width: 60px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        img {
          width: 60px;
          height: 60px;
          border-radius: 50%;
        }

        p {
          margin-top: 10px;
          font-size: 12px;
          color: #222;
        }
      }
    }
  }

  .threeBox:hover .tou {
    display: block;
  }

  .twoBox:hover .tou {
    display: block;
  }

  .oneBox:hover .tou {
    display: block;
  }

  .twoBox {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    position: relative;

    .kong {
      width: 48%;
      height: 85px;
      border-radius: 8px;
      background: #f6f6f6;

      img {
        width: 100%;
        height: 85px;
        border-radius: 10px;
      }
    }
  }

  .oneBox {
    margin-bottom: 10px;
    width: 100%;
    height: 85px;
    border-radius: 8px;
    background: #f6f6f6;
    position: relative;

    .imgBox {
      border-radius: 10px;

      img {
        width: 100%;
        height: 85px;
        border-radius: 10px;
      }
    }
  }
}

.all_play {
  // background: url("../../../../static/yptw_bj.png") no-repeat;
  // background-size: 100% 100%;
  width: 346px;
  height: 210px;
  margin: 0 auto;
  position: relative;
  cursor: pointer;

  .all_play_nav {
    width: 100%;
    display: flex;
    align-items: center;
    overflow-x: hidden;
    white-space: nowrap;
    position: absolute;
    top: 46px;
    padding: 0 10px;
    box-sizing: border-box;

    .all_play_nav_box {
      height: 20px;
      border-radius: 100px;
      background: #ffffff;
      color: #333333;
      font-size: 12px;
      line-height: 20px;
      padding: 0 10px;
      margin-right: 20px;
    }
  }
  .all_play_banner_null{
    background-color:#eee;
    width: 100%;
    height: 100%;
    color: red;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .all_play_banner {
    // padding: 10px 10px 0;
    position: relative;
    border-radius: 16px;

    .all_play_banner_title {
      color: #FFFFFF;
      font-size: 15px;
      position: absolute;
      top: 8px;
    }

    .all_play_banner_status {
      width: 52px;
      height: 22px;
      background-color: rgba(0, 0, 0, 0.6);
      color: #ffffff;
      text-align: center;
      line-height: 22px;
      font-size: 12px;
      border-radius: 100px;
      position: absolute;
      top: 20px;
      left: 14px;
      z-index: 2;
    }

    .banner_img_bj {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      filter: blur(30px);
      border-radius: 16px;
    }

    .banner_img {
      position: absolute;
      top: 10px;
      left: 5px;
      width: 335px;
      height: 170px;
      border-radius: 16px;
    }

    .all_play_banner_name {
      font-size: 15px;
      color: #ffffff;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      position: absolute;
      top: 190px;
      line-height: 24px;
      padding: 0 10px;
    }

    .box_detail_address {
      display: flex;
      align-items: center;
      padding-left: 20px;
      position: absolute;
      bottom: 6px;
      z-index: 2;
    }

    .box_detail_address_box {
      display: flex;
      align-items: center;
      font-size: 12px;
      color: #ffffff;
      margin-right: 32px;
    }

    .box_detail_address_box img {
      width: 16px;
      height: 16px;
      margin-right: 6px;
      margin-bottom: 2px;
    }
  }
}
.classify_box_one{
  background: rgba(255, 255, 255, 0) !important;
}
.classify_box {
  cursor: pointer;
  width: 345px;
  height: 60px;
  border-radius: 10px;
  background: #ffffff;
  display: flex;
  align-items: center;
  margin: 20px auto 11px;
  position: relative;

  .classify_box_content {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 12px;
    color: #666666;
    position: relative;
  }

  .classify_box_content_title {
    font-size: 16px;
    color: #222222;
    margin-bottom: 6px;
    font-weight: bold;
    position: relative;
    z-index: 2;
  }

  .bias_img {
    width: 10px;
    height: 18px;
  }

  .classify_icon1 {
    width: 25px;
    height: 23px;
    position: absolute;
    top: -2px;
    left: 18px;
  }

  .classify_icon2 {
    width: 24px;
    height: 24px;
    position: absolute;
    top: -7px;
    right: 8px;
    z-index: 3;
  }

  .classify_box_one {
    position: relative;
    font-size: 24px;
    color: #666666;
  }

  .classify_box_edit {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 99;
    display: none;
  }
}

.classify_box:hover .classify_box_edit {
  display: block;
}

.baoxiang {
  margin-top: 10px;

  .title {
    width: 100%;
    font-size: 22px;
    color: #222;
    font-weight: 600;
    padding: 14px 14px;
  }

  .chestList {
    display: flex;
    flex-direction: column;
    align-items: center;

    .list {
      width: 355px;
      margin-bottom: 14px;
      position: relative;

      .tou {
        width: 100%;
        height: 100%;
        background: #000;
        opacity: 0.2;
        z-index: 99;
        position: absolute;
        top: 0;
        left: 0;
        border-radius: 10px;

        .status {
          position: absolute;
          top: 8px;
          left: 8px;

          span {
            color: #fff;
          }
        }
      }

      .card_bao {
        width: 100%;
        height: 322px;
        border-radius: 12px;
        background: linear-gradient(180deg,
            #e8ecff 8.17%,
            #f0e5ff 46.58%,
            #fff 85.37%);
        margin-top: 15px;
        box-sizing: border-box;
        padding: 15px;

        .card_fen {
          width: 100%;
          height: 188px;
          position: relative;

          img {
            width: 100%;
            height: 100%;
            border-radius: 10px;
          }

          .labelBox {
            position: absolute;
            top: 10px;
            left: 10px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            z-index: 1;

            .label_1 {
              width: 60px;
              height: 20px;
              text-align: center;
              line-height: 20px;
              color: #fff;
              background: #ffb420;
              margin-right: 10px;
              font-size: 11px;
              border-radius: 100px;
            }

            .label_2 {
              width: 60px;
              height: 21px;
              text-align: center;
              line-height: 21px;
              color: #fff;
              background: #ff6d3b;
              margin-right: 10px;
              font-size: 11px;
              border-radius: 100px;
            }
          }
        }

        .name {
          font-size: 15px;
          color: #222;
          margin-top: 15px;
        }

        .money {
          display: flex;
          justify-content: flex-start;
          align-items: baseline;
          color: #222;
          margin-top: 7px;

          p:nth-child(1) {
            font-size: 16px;
          }

          p:nth-child(2) {
            font-size: 22px;
            font-weight: 500;
          }
        }

        .btnBox {
          display: flex;
          justify-content: space-between;
          align-items: center;
          margin-top: 9px;

          .left {
            position: relative;

            img {
              width: 21px;
              height: 21px;
              position: absolute;
              left: 0;
              top: 0;
            }

            .numBox {
              padding: 0 7px 0 12px;
              height: 18px;
              color: #ff3a3a;
              font-size: 11px;
              border: 1px solid rgba(255, 195, 177, 0.5);
              background: #fff8f6;
              border-radius: 100px;
              margin-left: 10px;
              margin-top: 2px;
            }
          }

          .payBtn {
            width: 83px;
            height: 24px;
            color: #fff;
            font-size: 12px;
            text-align: center;
            line-height: 24px;
            border-radius: 100px;
            background: linear-gradient(90deg, #0b87f2 0%, #6752ea 100%);
          }
        }
      }
    }
  }
}

.selected_li {
  width: 345px;
  box-shadow: 0 0 10px #ededed;
  background: #fff;
  margin: 0 auto;
  border-radius: 12px;
  padding: 14px;
  box-sizing: border-box;
  box-sizing: border-box;
  margin-top: 15px;
}

.li_header {
  position: relative;
  margin-bottom: 28px;
}

.wen_h_i {
  width: 315px;
  height: 188px;
  border-radius: 12px;
  overflow: hidden;
  overflow: hidden;
  position: relative;
}

.wen_h_i_01 {
  width: 100%;
  height: 100%;
  border-radius: 12px;
  filter: blur(20px);
}

.wen_h_i_02 {
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
}

.li_header .title {
  position: absolute;
  top: 11px;
  left: 11px;
  display: inline-flex;
  align-items: center;
  flex-direction: row;
  padding: 0 8px;
  font-size: 12px;
  height: 21px;
  background: #000000;
  opacity: 0.6;
  border-radius: 100px;
  z-index: 10;
}

.li_header .title .time_img {
  width: 12px;
  height: 12px;
  margin-right: 5px;
}

.li_header .title .time_word {
  margin-left: 5px;
}

.colo_E6C935 {
  color: #e6c935;
}

.colo_F61616 {
  color: #f61616;
}

.colo_C5C5C5 {
  color: #c5c5c5;
}

.identification {
  position: absolute;
  padding: 15px 16px;
  white-space: nowrap;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  color: #222222;
  font-size: 13px;
  background: #ffffff;
  box-shadow: 0 3px 6px #f1f1f1;
  border-radius: 30px;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
}

.identification_no {
  padding: 6px 16px;
}

.identification img {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-right: 7px;
}

.identification p {
  display: inline-block;
  max-width: 240px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.li_info .name {
  font-size: 16px;
  color: #222222;
}

.li_info .price {
  font-weight: 700;
  font-size: 23px;
  color: #222222;
  margin-top: 7px;
  display: flex;
  align-items: baseline;
}

.li_info .price p {
  font-weight: 400;
  font-size: 17px;
}

.li_info .price .maxPrice {
  font-size: 22px;
  color: #222;
}

.li_info .price .redPrice {
  font-size: 13px;
  color: #ff3a3a;
  margin-left: 6px;
}

.quantity {
  display: flex;
  width: 100%;
  flex-direction: row;
  justify-content: space-between;
  margin-bottom: 5px;
}

.quantity_left p {
  padding: 0 7px;
  font-weight: 400;
  font-size: 12px;
  line-height: 15px;
}

.quantity_left .left_01 {
  display: inline-block;
  color: #926300;
  background: #fbe6ba;
  border-radius: 2px 0 0 2px;
}

.quantity_left .left_02 {
  display: inline-block;
  color: #bc8000;
  background: #fff9eb;
  border-radius: 0 2px 2px 0;
}

.quantity_right {
  color: #ffffff;
  font-size: 12px;
  display: flex;
  flex-direction: row;
}

.quantity_right .q_order {
  width: 83px;
  height: 24px;
  border-radius: 100px;
  background: linear-gradient(90deg, #0b87f2 0%, #6752ea 100%);
  color: #ffffff;
  line-height: 24px;
  text-align: center;
}

.quantity_right .q_end {
  background: #bdbdbd;
}

.ellipseHide_two {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* 资产列表star */
.property {
  padding: 11px 15px 0;
}

.property_box {
  display: flex;
  flex-direction: column;
  border-radius: 16px;
  padding: 15px 12px;
  margin-bottom: 14px;
  background-color: #ffffff;
  width: 345px;
}
.property_box_h{
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid#E1E1E1;
  height: 50px;
  .tou_in{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    img{
      width: 28px;
      height: 28px;
      border-radius: 4px;
      margin-right: 8px;
    }
  }
  .jv_li{
    border: 1px solid #C4BFFF;
    padding: 0 3px;
    border-radius: 3px;
    height: 20px;
    line-height: 20px;
    color: #4738FA;
    font-size: 12px;
  }
}
.property_box_main{
  display: flex;
  padding-top: 12px;
}
.property_box_l {
  width: 92px;
  height: 95px;
  border-radius: 4px;
}

.property_box_r {
  flex: 1;
  padding: 0 0 0 10px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.property_box_r_title {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 7px;
  // height: 44px;
  .name{
    font-size: 15px;
    color: #222222;
    font-weight: bold;
    line-height: 22px;
    margin-left: 8px;
    flex: 1;
    width: 0;
  }
  .zhelou{
    width: 44px;
    height: 20px;
    position: relative;
    img{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }
    span{
      display: block;
      width: 100%;
      height: 20px;
      line-height: 20px;
      text-align: center;
      color: #fff;
      font-size: 11px;
      padding-left: 10px;
      position: relative;
    }
  }
}

.property_box_r_money {
  font-size: 13px;
  color: #ff3a3a;
}

.current_price {
  font-size: 17px;
  color: #ff3a3a;
  font-weight: bold;
}

.original_price {
  color: #838285;
  font-size: 12px;
  text-decoration: line-through;
  margin-left: 4px;
}

.property_box_r_buy {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.property_box_r_buy_button {
  width: 70px;
  height: 24px;
  border-radius: 100px;
  background: #ffeec3;
  color: #ef2d29;
  font-size: 14px;
  text-align: center;
  line-height: 24px;
}

.property_box_r_detail {
  display: flex;
  align-items: center;
  border-radius: 50px;
  height: 30px;
  margin-top: 8px;
}

.property_box_r_detail_l {
  background: linear-gradient(108deg, #ffa644 11.85%, #eb3d3c 54.64%);
  color: #ffffff;
  font-size: 13px;
  display: flex;
  align-items: center;
  padding: 0 13px 0 12px;
  height: 30px;
  border-radius: 50px 0 0 50px;
  margin-right: -6px;
  line-height: 30px;
}

.exclamation_point_img {
  width: 17px;
  height: 17px;
  margin-left: 4px;
}

.property_box_r_detail_r {
  background: url("../../../../static/property_box_r_detail_r.png") no-repeat;
  background-size: 100% 100%;
  color: #ef2d29;
  font-size: 13px;
  height: 31px;
  text-align: center;
  line-height: 31px;
  width: 89px;
  border-radius: 0 50px 50px 0;
}
.property_box_r_detail_new{
  widows: 220px;
  height: 40px;
  // background: #FCF4F0;
  // border-radius: 100px;
  display: flex;
  justify-content: space-between;
  overflow: hidden;
  .mon_box{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    margin-left: 10px;
    .money{
      display: flex;
      justify-content: flex-start;
      align-items: baseline;
      .min_m{
        font-size: 12px;
        color: #FF3A3A;
      }
      .max_m{
        font-size: 19px;
        font-weight: 600;
        color: #FF3A3A;
      }
      .old_m{
        font-size: 12px;
        color: #B67E7E;
        text-decoration: line-through;
        margin-left: 4px;
      }
    }
    .shen_m{
        font-size: 12px;
        color: #FF3A3A;
      }
  }
  .qiang_box{
    background: linear-gradient(90deg, #EA664B -9.85%, #EA4B3D 100.5%);
    // width: 102px;
    height: 36px;
    border-radius: 100px;
    padding: 0 6px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: relative;
    // background: url("../../../../static/qiang_bg.png") no-repeat;
    .p1{
      font-size: 14px;
      font-weight: 600;
      color: #fff;
      position: relative;
      z-index: 99;
    }
    .p2{
      font-size: 11px;
      color: #fff;
      position: relative;
      z-index: 99;
    }
    img{
      width: 102px;
      height: 40px;
      position: absolute;
      top: 0;
      left: 0;
    }
  }
}
/* 资产列表end */
</style>
